<template>
  <div class="login">
        <el-container class="container">
            <el-header class="header">
                    <div class="nav">
                      <img src="../assets/mouse.png" alt="">
                      <h2 class="contact">MOUSE</h2>
                    </div>
                    <h4 class="title">Specialized data sets of alleles and corresponding phenotypes in genetically modified mice</h4>
            </el-header>
             <el-container>
             <el-main>
             <div class="left">
             <div class="head">
             <h2 class="result">gene information results</h2>
             </div>
              <el-form :inline="true" :model="form" label-width="120px">
              <el-form-item>
              <h3 class="keywords">search keywords</h3>
              <el-input class="input1" disabled placeholder="" v-model="form.name"/>
              </el-form-item>
             </el-form>
             <div class="div1">
             <h3 class="details">more details</h3>
             <div class="arrows"><img :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" src="../assets/up-arrows.png" alt="" @click="flag = !flag">
             </div>
             </div>
             <div class="geneComposition">
             </div>
             </div>
            <div class="right">
            <div class="legend">
            <ul>
            <li><div class="rectangle1"></div>gene category</li>
            <li><div class="rectangle2"></div>gene composition</li>
            <li><div class="rectangle3"></div>double alleles</li>
            <li><div class="rectangle4"></div>gene allele</li>
            <li><div class="rectangle5"></div>disease</li>
            <li><div class="rectangle6"></div>reference</li>
            <li><div class="rectangle7"></div>phenotype</li>
            </ul>
            </div>
            </div>
             </el-main>
             </el-container>
        </el-container>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ref } from 'vue'

const form = reactive({
  name: '',
 })

const flag = ref('false')

 </script>

<style scoped>

.container{
  background: url("../assets/login.png") no-repeat;
  background-position: center ;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

.contact{
font-weight:400px;
margin-right: 20px;
text-shadow:0px 5px 9px rgba(0,0,0,.3);
color: #FBFCFD;
}

.header {
height:90px;
width:100%;
background-color:#476586;
display: flex;
}

.nav {
font-size:20px;
display: flex;
align-items: center;
}
.nav img{
margin-right: 20px;
}

.title{
color: #FBFCFD;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
margin-top: 55px;
}

.left{
width: 500px;
height: 600px;
background-color: #56747B;
background:rgba(0,0,0,.1);
float:left;
margin:auto;
padding:0;
overflow-y:auto;
top:0;
left:0;
}

.head{
width: 300px;
height: 60px;
border-bottom: 2px solid #FFFFFF;
margin: 50px auto;
}

.result{
color: #FFF;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
text-align: center;
margin-top:50px;
margin-bottom:50px;
}

.keywords{
margin-left:30px;
display:inline;
color:#FFF;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
}

.details{
display:inline;
float:left;
color:#FFF;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
}

.input1{
width:250px;
margin-left:20px;
}

.div1{
width:450px;
height:30px;
margin:auto;
margin-top:40px;
border-bottom: 2px solid #FFFFFF;
padding-bottom:10px;
}

.arrows{
display:inline;
float:right;
}


.gene_id{
margin-top:30px;
margin-left:30px;
margin-bottom:-20px;
}

.right{
width: 980px;
height: 600px;
background-color: #56747B;
background: rgba(0,0,0,.1);
float:right;
margin-left: 10px;
position:relative;
overflow-y:auto;
top:0;
left:0;
}

.legend{
width:200px;
height:160px;
position:absolute;
right:10px;
bottom:5px;
}

.legend li{
list-style-type:none;
color:#FFF;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
margin-bottom:2px;
}

.rectangle1,.rectangle2,.rectangle3,.rectangle4,.rectangle5,.rectangle6,.rectangle7{
display:inline-block;
vertical-align:middle;
height:15px;
width:40px;
border: 1px solid #BBBBBB;
box-shadow: 0px 5px 9px rgba(0,0,0,.3);
margin-right:10px;
}

.rectangle1{
background-color:#2E6084;
}

.rectangle2{
background-color:#5D5DCD;
}

.rectangle3{
background-color:#3C8289;
}

.rectangle4{
background-color:#4F832A;
}

.rectangle5{
background-color:#B279A0;
}

.rectangle6{
background-color:#EBE38C;
}

.rectangle7{
background-color:#641013;
}

  .arrowTransform{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(180deg);
  }
  .arrowTransformReturn{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(0deg);
  }


</style>
